<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding: 0;

        }
        #box1{
            height: 100px;
            width: 100px;
            background-color: red;
            position: absolute;
            left: 0;
        }
    </style>
    <script>
        window.onload=function(){
            var box1=document.getElementById("box1");
            var btn01=document.getElementById("btn01");
            var btn02=document.getElementById('btn02');

            //点击按钮以后，使box1向右移动(left值增大)
            btn01.onclick=function(){
              move(box1,800,10);
            }

            //点击按钮以后，使box1向左移动(left值减小)
            btn02.onclick=function(){
                move(box1,0,10);
            };
        };

         //定义一个变量，用来博爱村定时器的标识
         var timer;
        //尝试创建一个可以简单执行的函数
        /* 
            参数：obj：要执行动画的对象
            target:执行动画的目标位置
            speed:移动的速度(正数向右移动，负数向左移动)
        */
            function move(obj,target,speed){
                
                clearInterval(timer); 
                //获取元素目前的位置
                var current=parseInt(getStyle(obj,"left"));
                //判断速度的正负
                //如果使从0向800移动，则speed为正
                //如果从800向0移动，则speed为负
                if(current>target){
                    //此时速度应为负值
                    speed=-speed;
                } 
            
                // alert(oldValue);
                 timer=setInterval(function(){
                //获取box原来的Left值
                 var oldValue=parseInt(getStyle(obj,"left"));
                 //在旧值的基础上增加
                 var newValue=oldValue+speed;
                 //判断newValue是否小于0
                  //向左移动的时候，需要判断newValue是否小于target
                 //向右移动的时候，需要判断newValue是否大于target
                 if((speed<0&&newValue<target)||(speed>0&&newValue>target)){
                     newValue=target;
                 }
                 //将新值设置给box1
                 obj.style.left=newValue+"px";
                 //当元素移动到0px时，让其停止执行动画
                

                 if(newValue==target){
                    //达到目标，关闭定时器
                    clearInterval(timer);
                 }

                   
                },30)
            };
        function getStyle(obj,name){
                  if(window.getComputedStyle){
                    //正常浏览器的方式
                    return getComputedStyle(obj,null)[name];
                  }
                  else{
                     //IE8的方式
                     return obj.currentStyle[name];
                  }
                  
                 
              }
    </script>
</head>
<body>
    <button id="btn01">点击按钮以后box01向右移动</button>
    <button id="btn02">点击按钮以后box01向左移动</button>
    <br><br>
    <div id="box1"></div>
    <div style="width: 0; height: 1000px;border: 1px black solid;position: absolute;left:800px;top: 0;;"></div>
    
</body>
</html>